import { FC, useEffect, useState } from 'react';
import styles from './style.less';
import { useHistory } from 'react-router';

import WarningTab from '@/components/WarningTab';
import Map from '@/components/Map';
import TabList from '@/components/TabList';
import SimpleList from '@/components/SimpleList';
import Line from '@/components/Line';
import ImportantCompany from '@/components/ImportantCompany';

import { tabArr, yjtab_second, yjtab } from './config';
import { useModel } from 'umi';

const first_list_columns: any[] = [
  {
    title: '类型',
    dataIndex: 'YJQF',
    align: 'center',
    width: 95,
    render: (data: any) => (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-start',
          color: '#FDFF00',
        }}
      >
        {data.YJQF}
      </div>
    ),
  },
  {
    title: '内容',
    dataIndex: 'info',
    width: 575,
    render: (data: any) => (
      <p
        style={{
          whiteSpace: 'normal',
          wordBreak: 'break-word',
          textAlign: 'left',
          marginBottom: 0,
          padding: '5px 0',
        }}
      >
        <span>{data.info}</span>
        {
          <span
            style={{
              color: '#FDFF00',
              marginBottom: 0,
              display: 'block',
            }}
          >
            请予关注
            <span style={{ paddingLeft: 10 }}>[{data.YJSJ || ''}]</span>
          </span>
        }
      </p>
    ),
  },
];

const second_columns: any[] = [
  {
    title: '企业名称',
    dataIndex: 'name',
    width: 315,
    align: 'center',
    render: (data: any) => (
      <p style={{ width: '100%', marginBottom: 0, textAlign: 'left' }}>
        {data['name']}
      </p>
    ),
  },
  {
    title: '同比',
    dataIndex: 'tongbi',
    width: 120,
    align: 'center',
    render: (data: any) => (
      <span style={{ color: '#FDFF00' }}>
        {data.tongbi ? data.tongbi + '%' : '-'}
      </span>
    ),
  },
  {
    title: '模型预测',
    dataIndex: '',
    render: (data: any) => (
      <p
        style={{
          cursor: 'pointer',
          marginBottom: 0,
        }}
        onClick={() => {
          console.log(data);
        }}
      >
        查看详情
      </p>
    ),
  },
];
const Cyyj: FC = () => {
  const history = useHistory();
  const {
    yjList,
    getYjList,
    rankList,
    getRankList,
    marker,
    getMarker,
    removeMarker,
  } = useModel('cyyj');
  const [selectedName, setSelectedName] = useState<string>('');
  const [typeIndex, setTypeIndex] = useState<number>(0);
  const [rankIndex, setRankIndex] = useState<number>(0);

  // 获取预警数据
  const toGetYjList = () => {
    getYjList({
      YJQF: yjtab[typeIndex]?.type,
      YJCY: selectedName,
    });
  };
  // 获取企业预警指示排行榜
  const toGetRankList = () => {
    getRankList({
      type: yjtab_second[rankIndex]?.type,
    });
  };
  // 默认预警板块
  useEffect(() => {
    const item = tabArr[0];
    setSelectedName(item.title);
  }, []);
  useEffect(() => {
    toGetYjList();
    toGetRankList();
    removeMarker();
  }, [typeIndex, selectedName]);

  useEffect(() => {
    toGetRankList();
  }, [rankIndex]);

  return (
    <div className={styles.yj_container}>
      <div className={styles.map_container}>
        <Map title="预警企业分布图" marker={marker}></Map>
      </div>
      <div className={styles.middle_container}>
        <div className={styles.first}>
          <WarningTab
            dataSource={tabArr}
            onTabChange={(v) => {
              setSelectedName(v);
            }}
          ></WarningTab>
          <div className={styles.first_list}>
            <TabList
              size="3x"
              dataSource={yjtab}
              onChange={(v, index) => {
                setTypeIndex(index);
              }}
              currentIndex={typeIndex}
            />
            <div className={styles.first_list_table}>
              <SimpleList
                width={690}
                height={260}
                columns={first_list_columns}
                dataSource={yjList?.warningInfo || []}
                rowStyle={{
                  height: 'auto',
                }}
                hideHead
                hover
                selected={(v: any) => {
                  console.log(v);
                  getMarker({
                    ids: v.ids,
                  });
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
        <div className={styles.second}>
          <div className={styles.title}>
            <span>企业预警指标排行榜</span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <TabList
              size="2x"
              dataSource={yjtab_second}
              currentIndex={rankIndex}
              onChange={(v, index) => {
                setRankIndex(index);
              }}
            />
            <div
              style={{
                width: 690,
                margin: '0 auto',
              }}
            >
              <SimpleList
                width={690}
                height={288}
                columns={second_columns}
                dataSource={rankList}
                rowStyle={{
                  height: 48,
                }}
                hover
                sortNumber
                sortText="排名"
                sortStyle={{ width: 95 }}
                selected={(v: any) => {
                  console.log(v);
                }}
              ></SimpleList>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.right_container}>
        <div className={styles.third}>
          <div className={styles.title}>
            <span>最近一个月产业预警分析</span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <Line
              style={{
                marginTop: 30,
              }}
              category={yjList?.YJCYData?.names || []}
              dataSource={yjList?.YJCYData?.values || []}
              colors={['#93FDFF', '#318BFF']}
              legend={{
                show: true,
                icon: 'rect',
                right: '2%',
                textStyle: {
                  color: '#A3D5FF',
                },
              }}
            />
          </div>
        </div>
        <div className={styles.fourth}>
          <div className={styles.title}>
            <span>
              产业重点关注企业（
              {(yjList?.stressEnterpriseData?.data || []).length}）
            </span>
          </div>
          <div
            style={{
              marginTop: 10,
            }}
          >
            <ImportantCompany
              dataSource={yjList?.stressEnterpriseData?.data || []}
              onCompanyClick={(v: any) => {
                console.log(v);
                window.sessionStorage.setItem('companyName', v['B102']);
                window.sessionStorage.setItem('companyId', v.id);
                window.sessionStorage.setItem('backUrl', window.location.href);
                history.push('/qyhx/index1');
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Cyyj;
